<template>
  <div class="order-play combground">
    <div class="container">
      <div class="title comtitle"><h2 class="comh2">支付成功</h2></div>
      <div class="content">
        <div class="tips">
          <img src="@/assets/images/order.png" alt="" />
          恭喜您支付成功！
        </div>
        <div class="code textcenter textBold f20 corMain">您可前往我的订单查看订单详情。</div>
        <router-link :to="{ name: 'MyOrder', query: { state: -2 } }" class="into-order">去我的订单</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
import { myOrderPayment } from '@/request/api';

export default {
  name: 'SuccessPay',
  data() {
    return {
      id: '',
      info: '',
      code: 'SDF456',
      res: '复制成功！'
    };
  },
  created() {
    this.id = this.$route.query.order_id;
    this.getInfo();
  },
  methods: {
    /**
     * 获取已支付订单信息
     */
    getInfo() {
      myOrderPayment(this.id)
        .then(res => {
          this.info = res.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    copy() {
      const clipboard = new Clipboard('.coplay-code');
      clipboard.on('success', e => {
        this.$toast.show(this.res, 6000);
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制');
        // 释放内存
        clipboard.destroy();
      });
    }
  }
};
</script>

<style scoped>
.order-play {
  padding: 127px 0 112px;
}
.order-play .content {
  width: 100%;
  font-size: 16px;
  padding: 70px 200px 81px 200px;
  color: #4d4d4d;
  background: #fff;
  margin-top: 51px;
}
.order-play .content .tips {
  font-size: 20px;
  font-weight: bold;
  color: #e48b2c;
}
.order-play .content .tips img {
  vertical-align: middle;
  margin-right: 18px;
}
.code {
  margin: 30px 0 25px;
}
.code b {
  color: #3dabd9;
  font-size: 24px;
  font-weight: bold;
}
.coplay-code {
  width: 144px;
  height: 45px;
  background: #f3f4f7;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
}
.into-order {
  display: block;
  width: 235px;
  margin: 60px auto 0;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #e48b2c;
  border-radius: 10px;
}
</style>
